<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" http-equiv="Content-Type" content="width=device-width, initial-scale=1" charset=utf-8>
	<title>Metro</title>
	<!-- Chargement de la bibliothèque JQuery -->
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
	
	<style>
		.page-map, .ui-content, #map { width: 100%; height: 100%; padding: 0;}
		 html, body { height: 100%; } 
 		#map { height:100%; min-height: 100%; }  
	</style>
	
	</head>
<body>

<div data-role="page" id="page1" class="page-map">

	<div data-role="header">
   		<a href="../index.html" data-icon="home" data-transition="pop" data-theme="b" >Home</a>
   			<h1>Ligne C</h1>
   	</div>
	
	<div data-role="content">  
    	<div id="map"></div>
    </div>
	

	<div data-role="footer" data-position="fixed">        
        <div data-role="navbar" data-iconpos="top">
            <ul>
                <li>
                  	<a class="ui-btn ui-btn-up-ae"  href="/page_entity/pageMetro.html" data-ajax= "false">Tout</a>
                </li>
                <li>
                    <a class="ui-btn ui-btn-up-a" href="/page_entity/pageLigneA.html" data-ajax= "false">Ligne A</a>
                </li>
                <li>
                    <a class="ui-btn ui-btn-up-a" href="/page_entity/pageLigneB.html" data-ajax= "false">Ligne B</a>
                </li>
                
                <li>
                    <a class="ui-btn ui-btn-up-a ui-btn-active" href="/page_entity/pageLigneC.html" data-ajax= "false">Ligne C</a>
                </li>
            </ul>
        </div>
    </div>
 </div>
		
<script type="text/javascript">

function displayError(XMLHttpRequest, textStatus, errorThrown) {
	alert("error: " + textStatus);
	$('#resultArea').html(XMLHttpRequest.responseText);
}

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: new google.maps.LatLng(43.605256,1.442986),
        mapTypeControl: true,
      mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DEFAULT
  },
  navigationControl: true,
   navigationControlOptions: {
      style: google.maps.NavigationControlStyle.SMALL,
      position: google.maps.ControlPosition.TOP_RIGHT
  },
      scaleControl: true,
  streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

function getMetro(jsonResult) {
	// on génère du HTML à partir du résultat JSON reçu
	var tab = [];
	for (var i in jsonResult) {
		var tab2=[];
		tab2.push(jsonResult[i].nom)
		tab2.push(parseFloat(jsonResult[i].coord_y));
		tab2.push(parseFloat(jsonResult[i].coord_x));
		tab2.push(jsonResult[i].ligne);
		tab.push(tab2);
	}
	
	//Le traitement commence ici on va s'assurer que tout les éléments jquery soient en place avant de lancer le javascript
	/*$('#map').live('pageshow', function(event) {
    $("#maps").width($(document).width());
    $("#map").height(
        $(window).height() 
        - $("div.ui-footer").outerHeight() 
        - $("div.ui-header").outerHeight()
    );*/
    
	var infowindow = new google.maps.InfoWindow();

	var marker, i;
 
   for (i = 0; i < tab.length; i++) {  
		if(tab[i][3]==" C")
		{
			marker = new google.maps.Marker({
				position: new google.maps.LatLng(tab[i][1], tab[i][2]),
				map: map
			});
	
			google.maps.event.addListener(marker, 'click', (function(marker, i) {
				return function() {
					infowindow.setContent(tab[i][0]+"<br/>Ligne "+tab[i][3]);
					infowindow.open(map, marker);
				}	
			})(marker, i));
		}
	}
	
}
	
// La fonction getJSON est fournie par la bibliothèque JQuery
// cf: http://api.jquery.com/jQuery.getJSON/
$.getJSON(
// 1° paramètre : l'URL qui fournira les résultats JSON
'../selectMetro',
// 2° paramètre : la fonction qui sera appelée pour traiter le résultat
getMetro
// Eventuellement, la fonction appelée en cas d'erreur de traitement'
).fail(displayError);

//tab est une variable globale
getMetro();
</script>
		
</body>
</html>